﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>佣金记录</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.css">
    <script src="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.js" charset="utf-8"></script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        .header {
            position: relative;
            background: #333;
            color: #fff;
            padding: 20px;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
        }

        .header__headimgurl {
            min-width: 60px;
            width: 60px;
            height: 60px;
            background: #eee;
            border-radius: 50%;
        }

        .header__info {
            -webkit-flex: 1;
            flex: 1;
            padding-left: 20px;
        }

        .header__nickname {
            font-size: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }

        .btn__box .weui-btn {
            margin-top: 0;
        }
        .mescroll {
            position: fixed;
            top: 0px;
            bottom: 0;
            height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
        }
        .container {
            height: 100%;
            width: 100%;
            position: fixed;
            text-align: center;
        }
    </style>

</head>

<body>
<div class="container">
    <div id="mescroll" class="mescroll">
        <div>
            <div id="tap">
                <div class="header">
                    <div class="header__info">
                        <div class="header__nickname">佣金记录</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input id="openId" type="hidden" th:value="${openId}">
<input id="platform" type="hidden" th:value="${platform}">

</body>

</html>
<script>
    var openId = $('#openId').val();
    var platform = $('#platform').val();
    //创建MeScroll对象
    var mescroll = new MeScroll("mescroll", {
        down: {
            //auto:true,
            isLock: true,
            //callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        up: {
            auto: true,
            callback: upCallback, //上拉加载的回调
            empty: {
                //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
                warpId: "mescroll", //父布局的id (1.3.5版本支持传入dom元素)
                icon: "/image/notData.png", //图标,默认null,支持网络图
                tip: "暂无相关数据~" //提示
            }
        }
    });

    //下拉刷新的回调
    function downCallback() {

    }
    var id =0;
    //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
    function upCallback(page) {
        $.get("/commission", {
            'pageNum': page.num,
            'pageSize': page.size,
            'openId': openId,
            'platform': platform
        }, function (data) {
            if(data.code=='200'){
                var curPageData = data.data.list; // 接口返回的当前页数据列表
                var totalPage = data.data.pages; // 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
                for (var i = 0; i < data.data.list.length; i++) {
                    var d=new Date(data.data.list[i].createTime);
                    id = id + 1;
                    $("#tap").append('<div class="header">' +
                        '                    <div style="width: 10%"><span>'+id+'</span></div>' +
                        '                    <img class="header__headimgurl" src="'+data.data.list[i].imageUrl+'" alt="">' +
                        '                    <div class="header__info">' +
                        '                        <div class="header__nickname">'+data.data.list[i].nickName+'</div>' +
                        '                    </div>' +
                        '                    <div class="header__info">' +
                        '                        <div class="header__nickname">'+data.data.list[i].moneyStr+'</div>' +
                        '                    </div>' +
                        '                </div>')
                }
                mescroll.endByPage(curPageData.length, totalPage);
            }else{
                alert(data.msg)
            }

        })
    }
</script>

